import { reactControl, BaseReactElementControl } from "pao-aop-client";
import { addon } from "pao-aop";
import React from "react";
import { Card, Descriptions, Row, } from "antd";
/**
 * 组件：活动信息状态
 */
export class ActivityInfoState {
}

/**
 * 组件：活动信息
 * 活动信息
 */
export class ActivityInfo extends React.Component<ActivityInfoControl, ActivityInfoState> {

    componentWillMount() {
        this.setState({
            activity_info: this.props.activity_info || [],
        });
    }
    render() {
        let { activity_info } = this.props;

        // 初始化，抑制报错
        if (!activity_info) {
            activity_info = [];
        }

        return (
            <Card>
                <Descriptions title="活动发布信息" bordered={true}>
                    <Descriptions.Item label="活动名称">{activity_info['activity_name'] || ''}</Descriptions.Item>
                    <Descriptions.Item label="活动类型">{activity_info['activity_type_name'] ? activity_info['activity_type_name'] : ''}</Descriptions.Item>
                    <Descriptions.Item label="商家">{activity_info['organization_name'] ? activity_info['organization_name'] : ''}</Descriptions.Item>
                    <Descriptions.Item label="最大参与人数">{activity_info['max_quantity'] || 0}</Descriptions.Item>
                    <Descriptions.Item label="活动开始时间">{activity_info['begin_date'] || ''}</Descriptions.Item>
                    <Descriptions.Item label="活动结束时间">{activity_info['end_date'] || ''}</Descriptions.Item>
                    <Descriptions.Item label="活动地点">{activity_info['address'] || ''}</Descriptions.Item>
                    <Descriptions.Item label="联系人">{activity_info['contacts'] || ''}</Descriptions.Item>
                    <Descriptions.Item label="联系人电话">{activity_info['phone'] || ''}</Descriptions.Item>
                    <Descriptions.Item label="活动金额">￥{activity_info['amount'] || ''}</Descriptions.Item>
                    <Descriptions.Item label="活动图片" span={3}>
                        {activity_info['photo'] && activity_info['photo'].length > 0 ? activity_info['photo'].map((item: any, index: number) => {
                            return (
                                <Row key={index}>
                                    <img style={{ maxWidth: '200px' }} alt={activity_info['title']} src={item} />
                                </Row>
                            );
                        }) : null}
                    </Descriptions.Item>
                    <Descriptions.Item label="活动介绍" span={3}><div dangerouslySetInnerHTML={{ __html: activity_info['introduce'] || '' }} /></Descriptions.Item>
                </Descriptions>
            </Card>
        );
    }
}

/**
 * 控件：活动信息控制器
 * 活动信息
 */
@addon('ActivityInfo', '活动信息', '活动信息')
@reactControl(ActivityInfo, true)
export class ActivityInfoControl extends BaseReactElementControl {
    /** 基础数据 */
    activity_info?: any;
}